<template>
	<view class="container">
		<view style="background: #FFFFFF;">
			<view class="fx aic pt_16 plr_16" style="color:#8D91A9;">
				<image class="width_56 height_56 br50 mr_12" :src="userInfo.avatar" mode="aspectFit"></image>
				<view>
					<view class="fz_16 fb">
						{{userInfo.nickName||''}}
					</view>
					<view class="mt_4 fz_12">
						当前积分：{{vipData.account.pointsTotal||0}}
					</view>
				</view>
			</view>
			<view class="pt_16 pb_21">
				<u-tabs :current="currentLv" :list="tabsList" lineColor="#A54F12" itemStyle="width: 25%;padding: 0;"
					activeStyle="color: #A54F12" inactiveStyle="color: #44485A" lineWidth="48rpx" lineHeight="4rpx"
					@change="handleChangeLevel"></u-tabs>
			</view>
			<view class="fc">
				<u-swiper showTitle :current="currentLv" :list="levelList" previousMargin="40rpx" nextMargin="40rpx"
					imgMode="heightFix" :indicator="false" :autoplay="false" height="304rpx"
					@change="handleChangeLevel"></u-swiper>
			</view>
		</view>
		<view class="p_16">
			<template v-if="currentLv>0&&currentLv<3&&(vipData.memberLevel==(currentLv+1))">
				<view class="fz_18 fb">
					成为{{tabsList[currentLv+1].name}}条件
				</view>
				<view class="pb_24">
					<view class="mt_12">
						<view class="fx jcb fz_12" style="color: #634000;">
							<text>还需转换积分：{{needIntegral(levelList[currentLv+1]).txt}}</text>
							<text>已完成{{needIntegral(levelList[currentLv+1]).percent}}%</text>
						</view>
						<view class="mt_4">
							<u-line-progress :percentage="needIntegral(levelList[currentLv+1]).percent"
								activeColor="#FDDC84" inactiveColor="#FFF4D8" :showText="false"></u-line-progress>
						</view>
					</view>
					<view class="mt_16">
						<view class="fx jcb fz_12" style="color: #634000;">
							<text>还需{{tabsList[currentLv].name}}：{{needMember(levelList[currentLv+1]).txt}}个</text>
							<text>已完成{{needMember(levelList[currentLv+1]).percent}}%</text>
						</view>
						<view class="mt_4">
							<u-line-progress :percentage="needMember(levelList[currentLv+1]).percent"
								activeColor="#FDDC84" inactiveColor="#FFF4D8" :showText="false"></u-line-progress>
						</view>
					</view>
				</view>
			</template>
			<view class="pb_30" v-if="currentLv!=3">
				<view class="fz_18 fb">
					成长任务
				</view>
				<view class="fx aic jcb mt_18" v-if="currentLv==0">
					<view class="fx aic">
						<image class="width_44 height_44 mr_12" src="../static/images/vip_ic5.png" mode=""></image>
						<view>
							<view>
								首次购买超过{{levelTask.firstCurrency||0}}元的产品
							</view>
							<view class="fz_12 fc_999">
								获得<text class="fc_primary">{{levelTask.firstIntegral||0}}</text>积分
							</view>
						</view>
					</view>
					<button :disabled="btnDisable" class="custom_btn width_80 lh_28 br_58 fz_14"
						style="color: #634000;background: linear-gradient(135deg, #FFDE88 0%, #F0CA67 100%);"
						@click="handleBtn()">去首页</button>
				</view>
				<view class="fx aic jcb mt_18" v-if="currentLv==1||currentLv==2">
					<view class="fx aic">
						<image class="width_44 height_44 mr_12" src="../static/images/vip_ic4.png" mode=""></image>
						<view>
							<view>
								每转发一次商品
							</view>
							<view class="fz_12 fc_999">
								可转换<text class="fc_primary">{{levelTask.forwardIntegral||0}}</text>积分
							</view>
						</view>
					</view>
					<button :disabled="btnDisable" class="custom_btn width_80 lh_28 br_58 fz_14"
						style="color: #634000;background: linear-gradient(135deg, #FFDE88 0%, #F0CA67 100%);"
						@click="handleBtn()">{{taskData.relayIntegral?'继续转发':'去转发'}}</button>
				</view>
				<view class="fx aic jcb mt_18" v-if="currentLv==1||currentLv==2">
					<view class="fx aic">
						<image class="width_44 height_44 mr_12" src="../static/images/vip_ic3.png" mode=""></image>
						<view>
							<view>
								每浏览一个商品
							</view>
							<view class="fz_12 fc_999">
								可转换<text class="fc_primary">{{levelTask.browseIntegral||0}}</text>积分
							</view>
						</view>
					</view>
					<button :disabled="btnDisable" class="custom_btn width_80 lh_28 br_58 fz_14"
						style="color: #634000;background: linear-gradient(135deg, #FFDE88 0%, #F0CA67 100%);"
						@click="handleBtn()">{{taskData.previewIntegral?'继续浏览':'去浏览'}}</button>
				</view>
				<view class="fx aic jcb mt_18" v-if="currentLv==1||currentLv==2">
					<view class="fx aic">
						<image class="width_44 height_44 mr_12" src="../static/images/vip_ic2.png" mode=""></image>
						<view>
							<view>
								每邀请一个新用户注册
							</view>
							<view class="fz_12 fc_999">
								可转换<text class="fc_primary">{{levelTask.inviteIntegral||0}}</text>积分
							</view>
						</view>
					</view>
					<button :disabled="btnDisable" class="custom_btn width_80 lh_28 br_58 fz_14"
						style="color: #634000;background: linear-gradient(135deg, #FFDE88 0%, #F0CA67 100%);"
						@click="handleBtn('invite')">{{taskData.inviteIntegral?'继续邀请':'去邀请'}}</button>
				</view>
				<!-- view class="fx aic jcb mt_18" v-if="currentLv==1||currentLv==2">
					<view class="fx aic">
						<image class="width_44 height_44 mr_12" src="../static/images/vip_ic6.png" mode=""></image>
						<view>
							<view>
								好评商品
							</view>
							<view class="fz_12 fc_999">
								可转换<text class="fc_primary">{{levelTask.praiseIntegral||0}}</text>积分
							</view>
						</view>
					</view>
					<button :disabled="btnDisable" class="custom_btn width_80 lh_28 br_58 fz_14"
						style="color: #634000;background: linear-gradient(135deg, #FFDE88 0%, #F0CA67 100%);"
						@click="handleBtn('evaluate')">去评价</button>
				</view> -->
				<view class="fx aic jcb mt_18" v-if="(currentLv==1||currentLv==2)&&!!levelTask.currencyRatio">
					<view class="fx aic">
						<image class="width_44 height_44 mr_12" src="../static/images/vip_ic1.png" mode=""></image>
						<view>
							<view>
								有推广的用户购买了商品
							</view>
							<view class="fz_12 fc_999">
								可转换商品金额<text class="fc_primary">{{levelTask.currencyRatio||0}}</text>%的积分
							</view>
						</view>
					</view>
					<button :disabled="btnDisable" class="custom_btn width_80 lh_28 br_58 fz_14"
						style="color: #634000;background: linear-gradient(135deg, #FFDE88 0%, #F0CA67 100%);"
						@click="handleBtn('invite')">{{taskData.recommondIntegral?'继续邀请':'去邀请'}}</button>
				</view>
			</view>
			<view class="fz_18 fb">
				{{tabsList[currentLv].name}}特权
			</view>
			<view class="mt_12" v-if="currentLv==0">
				普通会员暂无会员特权
			</view>
			<view class="mt_12" v-if="currentLv==1">
				可获得邀请用户消费的{{levelList[1].integralRatio||0}}%积分及{{levelList[1].currencyRatio||0}}%金豆
			</view>
			<view class="mt_12" v-if="currentLv==2">
				1.可获得邀请用户消费的{{levelList[2].integralRatio||0}}%积分及{{levelList[2].currencyRatio||0}}%金豆
				<view class="mt_12">
					2.每月获得尊享会员业绩提成
				</view>
			</view>
			<view class="mt_12" v-if="currentLv==3">
				1.可获得邀请用户消费的{{levelList[3].integralRatio||0}}%积分及{{levelList[3].currencyRatio||0}}%金豆
				<view class="mt_12">
					2.每月获得联盟会员业绩提成
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/service/config/api.js'
	import {
		floatSub
	} from '@/utils/index.js'
	const ossUrl = "https://bsl-app-images.oss-cn-beijing.aliyuncs.com/wechat-app/images"
	import {
		BASE
	} from '@/const/base.js'
	const tabsList = [{
		name: '普通会员'
	}, {
		name: '尊享会员'
	}, {
		name: '联盟会员'
	}, {
		name: '创业会员'
	}]
	const levelDataList = (data, vipData) => ([{
		...data[0],
		url: BASE.ossUrl + '/person/vip_lv1.png',
		vipObject: {
			current: vipData.memberLevel == 1,
			desc: vipData.memberLevel > 1 ? '已超越该等级' :
				`还差${floatSub((data[1].ordinaryIntegral||0),(vipData.account.pointsTotal || 0))}积分可成为尊享会员。`,
			descStyle: {
				color: '#757894'
			}
		}
	}, {
		...data[1],
		url: BASE.ossUrl + '/person/vip_lv2.png',
		vipObject: {
			current: vipData.memberLevel == 2,
			desc: vipData.memberLevel > 2 ? '已超越该等级' :
				`累计转化${data[2].integralCondition||0}积分且直推用户中有${data[2].userCondition||0}个尊享会员。`,
			descStyle: {
				color: '#B16134'
			}
		}
	}, {
		...data[2],
		url: BASE.ossUrl + '/person/vip_lv3.png',
		vipObject: {
			current: vipData.memberLevel == 3,
			desc: vipData.memberLevel > 3 ? '已超越该等级' :
				`累计转化${data[3].integralCondition||0}积分且直推用户中有${data[3].userCondition||0}个联盟会员。`,
			descStyle: {
				color: '#115D70'
			}
		}
	}, {
		...data[3],
		url: BASE.ossUrl + '/person/vip_lv4.png',
		vipObject: {
			current: vipData.memberLevel == 4,
		}
	}])
	export default {
		data() {
			return {
				tabsList,
				levelList: [],
				levelData: [],
				levelTask: {},
				currentLv: 0,
				percent1: 40,
				percent2: 60,
				userInfo: this.$storage.getItem('basicUnserInfo') || {},
				vipData: {},
				ossUrl: this.$ossUrl,
				taskData: {}
			}
		},
		watch: {
			currentLv(newVal) {
				if (this.levelList && this.levelList.length) {
					this.levelTask = {
						...this.levelTask,
						...this.levelList.find(item => item.type == newVal + 1)
					}
				}
			}
		},
		computed: {
			needIntegral() {
				return data => this.vipData.account ? ({
					percent: Math.floor(((this.vipData.account.totalConversionPoints || 0) / (data
						.integralCondition || 0)) * 100) > 100 ? 100 : Math.floor(((this.vipData.account
						.totalConversionPoints || 0) / (data
						.integralCondition || 0)) * 100),
					txt: ((data.integralCondition || 0) - (this.vipData.account.totalConversionPoints || 0)) < 0 ?
						0 : ((data.integralCondition || 0) - (this.vipData.account.totalConversionPoints || 0))
				}) : ({
					percent: 0,
					txt: 0
				})
			},
			needMember() {
				return data => {
					const dataArr = ['general', 'enjoyable', 'alliance', 'syb']
					const count = dataArr.reduce((pre,cur,index)=>{
						if(index>=this.currentLv) {
							return pre+Number((this.vipData.memberCount[cur]||0))
						}
						return pre
					}, 0)
					return ({
						percent: Math.floor((count / (data
							.userCondition || 0)) * 100) > 100 ? 100 : Math.floor((count / (data
							.userCondition || 0)) * 100),
						txt: ((data.userCondition || 0) - count) < 0 ? 0 : ((data
							.userCondition || 0) - count)
					})
				}
			},
			btnDisable() {
				return this.vipData.memberLevel != (Number(this.currentLv) + 1)
			}
		},
		onLoad(options) {
			this.currentLv = Number(options.currentLv || 0)
			this.getVipInfoData()
		},
		methods: {
			getVipInfoData() {
				this.$utils.loading()
				return new Promise(resolve => {
					api.get('/user/api/user/getUserMemberInfo', {}, {
						noHideLoading: true
					}).then(res => {
						this.vipData = res.data
						Promise.all([this.getVipMemberData(res.data), this.getVipTask(), this
						.getTaskData()]).then(([res1,
							res2, res3
						]) => {
							this.levelTask = {
								...this.levelTask,
								...this.levelList.find(item => item.type == this.currentLv + 1)
							}
						})

					}).catch(() => {
						uni.hideLoading()
					})
				})
			},
			getVipMemberData(data) {
				return new Promise(resolve => {
					api.get('/user/api/user/memberSet', {}, {
						noHideLoading: true
					}).then(res => {
						if (res.data) {
							this.levelList = levelDataList(res.data, data)
						}
						resolve()
					}).finally(() => {
						uni.hideLoading()
					})
				})
			},
			getVipTask() {
				return new Promise(resolve => {
					api.get('/user/api/user/getIntegralSet', {}, {
						noHideLoading: true
					}).then(res => {
						if (res.data) {
							this.levelTask = res.data
						}
						resolve()
					})
				})
			},
			getTaskData() {
				return new Promise(resolve => {
					api.get('/user/api/myTask', {}, {
						noHideLoading: true
					}).then(res => {
						if (res.data && res.data.detailList) {
							this.taskData = res.data.detailList.reduce((preObj, cur) => {
								switch (cur.type) {
									case 1:
										preObj.relayIntegral = cur.todayIntegral
										break;
									case 2:
										preObj.previewIntegral = cur.todayIntegral
										break;
									case 3:
										preObj.inviteIntegral = cur.todayIntegral
										break;
									case 4:
										preObj.recommondIntegral = cur.todayIntegral
										break;
									case 5:
										preObj.goodIntegral = cur.todayIntegral
										break;
									default:
										break;
								}
								return preObj;
							}, {})
						}
						resolve()
					})
				})
			},
			handleChangeLevel(item) {
				console.log(item)
				this.currentLv = item.current === undefined ? item.index : item.current
			},
			handleBtn(type) {
				if (type == 'invite') {
					uni.navigateTo({
						url: '/pages/common/pages/invite'
					})
				} else if (type == 'evaluate') {
					uni.navigateTo({
						url: '/pages/person/pages/order'
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			}
		},
	}
</script>

<style lang="scss">
	@include color_page;
</style>

<style lang="scss" scoped>
	.container {
		/deep/.u-swiper__wrapper {
			background-color: #FFFFFF;
		}

		.custom_btn[disabled]:not([type]) {
			background: #ccc !important;
		}
	}
</style>